<template>
  <PageContainer>
    <view>
      <Header title="插入公众号" />
      <view class="container mb-12">
        <view class="px-16 py-12 title-color fz-16">
          <text>插入链接</text>
        </view>
        <view class="px-16 py-12 context-color disFlxAC">
          <text class="ov-1 fz-14 flex-1">小程序路径：{{ getPagePath }}</text>
          <view class="px-8 py-4 fz-12 ml-16 copy-btn br-12" @click="setClipboardData(getPagePath)">
            <text>复制</text>
          </view>
        </view>
        <view class="px-16 py-12 context-color disFlxAC">
          <text class="ov-1 fz-14 flex-1">APPID：{{ appId }}</text>
          <view class="px-8 py-4 fz-12 ml-16 copy-btn br-12" @click="setClipboardData(appId)">
            <text>复制</text>
          </view>
        </view>
      </view>
      <view class="container">
        <view class="px-16 py-12 title-color fz-16">
          <text>插入教程</text>
        </view>
        <view class="pa-16">
          <template v-for="(v, i) in content" :key="i">
            <view v-if="v.title" class="mb-12 title-color fz-14">
              <text>{{ v.title }}</text>
            </view>
            <view v-if="v.text" class="fz-14 context-color mb-12">
              <text>{{ v.text }}</text>
            </view>
            <view v-if="v.img" class="mb-12">
              <TImage :src="v.img" :width="v.imgWidth"  mode="widthFix" preview show-menu-by-longpress />
            </view>
          </template>
        </view>
      </view>
    </view>
  </PageContainer>
</template>

<script lang="ts" setup>
  /* insertMpTutorials 插入公众号 */
  import Header from '@/components/Header/index.vue';
  import PageContainer from '@/components/PageContainer/index.vue';
  import TImage from '@/components/TImage/index.vue';
  import { CacheEnum } from '@/enums/cacheEnum';
  import { TabbarPageEnum } from '@/enums/pageEnum';
  import { getUrl, onLoad } from '@/router';
  import type { QueryType } from '@/router/types';
  import { isObject } from '@/utils/is';
  import { forIn } from 'lodash-es';
  import { computed, ref } from 'vue';

  const appId = uni.getStorageSync(CacheEnum.appid);
  const routeQuery = ref<QueryType>({});

  onLoad<'insertMpTutorials'>((op) => {
    if (isObject(op.query)) {
      routeQuery.value = op.query;
    }
  });
  routeQuery.value;
  const getPagePath = computed(() => {
    let queryStr = '';
    forIn(routeQuery.value, (value, key) => {
      if (value) queryStr += `${key}=${routeQuery.value[key]}&`;
    });
    return getUrl(TabbarPageEnum.STARTPAGE) + '?' + queryStr.slice(0, -1);
  });

  const content = ref([
    {
      text: '您可以在您的公众号菜单栏或推文中插入您的链接。插入小程序所需的AppID和专属小程序路径在本页复制即可。',
    },
    {
      title: '一、绑定小程序（已绑定可跳过）：',
      text: '登陆公众号平台，进入【广告与服务】-【小程序管理】。如未开通小程序，则需要点击开通。点击关联小程序。搜索本小程序名称或输入AppID，绑定小程序。',
    },
    {
      title: '二、插入到公众号菜单：',
      text: '登陆公众号平台，进入【内容与互动】-【自定义菜单】。添加菜单，【消息类型】选择【跳转小程序】，按提示选择当前小程序，输入本页提供的专属小程序路径，保存并发布即可。',
      img: 'https://hb-saas.obs.cn-south-1.myhuaweicloud.com/mall/saas/official-step1.jpg',
    },
    {
      title: '三、插入到公众号文章：',
      text: '登陆公众号平台，编辑公众号文章时，在图文编辑器顶部选择【小程序】，选择小程序（搜索本小程序名称或者输入AppID），然后输入本页提供的专属小程序路径，即可实现将小程序插入推文。',
      img: 'https://hb-saas.obs.cn-south-1.myhuaweicloud.com/mall/saas/official-step2.jpg',
    },
    {
      title: '四、更多运营技巧或咨询客服',
      img: 'https://hb-saas.obs.cn-south-1.myhuaweicloud.com/mall/saas/sxb-gzh.png',
      imgWidth: '300rpx'
    }
  ]);

  // 复制信息
  function setClipboardData(copyText: string) {
    uni.setClipboardData({
      data: copyText,
      success: function () {
        uni.showToast({
          title: '复制成功',
        });
      },
    });
  }
</script>

<style lang="scss" scoped>
  .title-color {
    color: #333;
  }

  .context-color {
    color: #646566;
  }

  .copy-btn {
    color: #2878ff;
    border: 1px solid #2878ff;
  }

  .container {
    background-color: #fff;
  }
</style>
